<template>
<div>
  <Header :title="state.headerTitle" :left-arrow="false" leftText=""/>
  <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="getMore">
      <div class="page-body">
        <Music v-for="(item,index) in state.movies" :movie="item" :key="index"/>
      </div>
  </van-list>
</div>
</template>

<script>
import Music from "@/components/Music";
import {onMounted, reactive} from 'vue'
import Header from "@/components/Header";
import {useStore} from "vuex";

import {fetchMusicListByAuthor} from "@/api/music.js"

//import {useRouter} from "vue-router";
export default {
    name: "More",
    components:{
      Header,
      Music,
    },
    props: {
      singer: String //可能是父组件传递的,也可能是router传递的
    },
    setup(props){
        const state = reactive({
          movies: [],
          headerTitle: '',
          finished: false,
          loading: false,
        });
      const store = useStore();
      // const router = useRouter()
      const singer = store.state.categoryList[props.singer]
      state.headerTitle = singer
	  console.log("singer----" + props.singer);
      onMounted(() =>{
          //路由参数传递
          getMusicListByAuthor(singer).then(function (result){
			 state.movies = result;
             state.loading = false
          });
        })

      function getMore(){

          getMusicListByAuthor(singer).then(function (result){
            console.log(result)
           // state.movies.concat(result.musics)
          });
        }
      return {state, getMore}
    }
}
async function getMusicListByAuthor(singerName){
		let movies = []
		await fetchMusicListByAuthor(singerName, {
			count:8
		}).then(
			function (res){
				movies = res;
			}
		)
		return movies
}
</script>

<style scoped>
.page-body {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
}
</style>